
<!-- Copyright IBM Corp, All Rights Reserved.

 SPDX-License-Identifier: Apache-2.0
-->

{% extends "layout.html" %}
{% block title %}System Status{% endblock %}
{% block custom_css %}
    <style>
        .echarts {
            width: 100% !important;
            height: 300px !important;
        }
    </style>
{% endblock %}
{% block body %}
{{ super() }}

<h2 class="page-header">Platform Status</h2>
    <div id="charts">
        <v-row :gutter="16">
            <v-spin :spinning="loading" tip="loading data...">
            <v-col class="gutter-row" span="6">
                <echart title="Host Status" :data="host.status" chartid="hostStatus"></echart>
            </v-col>
            <v-col class="gutter-row" span="6">
                <echart title="Host Type" :data="host.type" chartid="hostType"></echart>
            </v-col>
            <v-col class="gutter-row" span="6">
                <echart title="Cluster Status" :data="cluster.status" chartid="clusterStatus"></echart>
            </v-col>
            <v-col class="gutter-row" span="6">
                <echart title="Cluster Type" :data="cluster.type" chartid="clusterType"></echart>
            </v-col>
            </v-spin>
        </v-row>
    </div>

{% endblock %}
{% block custom_js %}
    <script src="{{ url_for('static', filename='js/echarts.common.min.js') }}"> </script>
    <script src="{{ url_for('static', filename='js/vue-echarts.js') }}"> </script>
    <script src="{{ url_for('static', filename='js/routes/stat.js') }}"> </script>
{% endblock %}